import * as React from 'react';
import { Image, Carousel } from 'antd';
import { useModel } from 'umi';

import { TPL_TYPE, BOR_STYLE, SIZE_SET, IMGERROR } from '..';
import styles from './index.less';

import type { ImageValue } from '..';

interface IImageViewProps {
  data: ImageValue;
}

const ImageView: React.FunctionComponent<IImageViewProps> = (props) => {
  const { initialState } = useModel('@@initialState');
  const { imgPrefix } = initialState || {};

  const { tplType, borderStyle, imgRadius, sizeSetting, imagesData } = props.data;
  // 尺寸设置-模版为「标准样式」、「轮播样式」时显示该配置项大图：750x750px小图：750x270px
  const getContentSize = (borderStyles: string, sizeSettings: string) => {
    const style = { width: '100%', height: 'auto' };
    if (sizeSettings === SIZE_SET.bigImg.value) {
      style.height = borderStyles === BOR_STYLE.noBorder.value ? '375px' : '355px';
    }
    if (sizeSettings === SIZE_SET.smallImg.value) {
      style.height = borderStyles === BOR_STYLE.noBorder.value ? '136px' : '116px';
    }
    return style;
  };

  if (imagesData.length === 0) {
    return (
      <div className={styles['goods-container']}>
        <h3 style={{ textAlign: 'center' }}>请添加图片</h3>
      </div>
    );
  }

  return (
    <div className={styles['img-body']}>
      {/* 单列 */}
      {tplType === TPL_TYPE.normal.value && (
        <div
          style={{
            padding: borderStyle === BOR_STYLE.noBorder.value ? 0 : 10,
          }}
        >
          <Image
            draggable="false"
            style={{
              borderRadius: borderStyle === BOR_STYLE.noBorder.value ? 0 : imgRadius,
              ...getContentSize(borderStyle, sizeSetting),
            }}
            preview={false}
            src={imagesData[0] ? imgPrefix + imagesData[0].imageUrl : IMGERROR}
            fallback={IMGERROR}
          />
        </div>
      )}
      {/* 轮播 */}
      {tplType === TPL_TYPE.carousel.value && (
        <div
          className={styles['carousel-father']}
          style={{
            padding: borderStyle === BOR_STYLE.noBorder.value ? 0 : 10,
          }}
        >
          <Carousel autoplay={true}>
            {imagesData
              .filter((val) => val)
              .map((item, index) => (
                <div className={styles['carousel-solo']} key={item.imageUrl + index}>
                  <Image
                    draggable="false"
                    className={styles['carousel-img']}
                    style={{
                      borderRadius: borderStyle === BOR_STYLE.noBorder.value ? 0 : imgRadius,
                      ...getContentSize(borderStyle, sizeSetting),
                    }}
                    preview={false}
                    src={imagesData[index] ? imgPrefix + imagesData[index].imageUrl : IMGERROR}
                    fallback={IMGERROR}
                  />
                </div>
              ))}
          </Carousel>
        </div>
      )}
      {/* 两列、三列 */}
      {[TPL_TYPE.twoLine.value, TPL_TYPE.threeLine.value].includes(tplType) && (
        <div className={styles['line-img-body']}>
          {imagesData
            .filter((val) => val)
            .map((item, index) => {
              if (index < 2)
                return (
                  <Image
                    draggable="false"
                    key={item.imageUrl + index}
                    className={styles['line-img']}
                    style={{
                      width: tplType === TPL_TYPE.twoLine.value ? 170 : 110,
                      borderRadius: imgRadius,
                    }}
                    preview={false}
                    src={imagesData[index] ? imgPrefix + imagesData[index].imageUrl : IMGERROR}
                    fallback={IMGERROR}
                  />
                );
            })}
          {/* 三列才会显示 */}
          {tplType !== TPL_TYPE.twoLine.value && (
            <Image
              draggable="false"
              className={styles['line-img']}
              style={{
                width: tplType === TPL_TYPE.twoLine.value ? 170 : 110,
                borderRadius: imgRadius,
              }}
              preview={false}
              src={imagesData[2] ? imgPrefix + imagesData[2].imageUrl : IMGERROR}
              fallback={IMGERROR}
            />
          )}
        </div>
      )}

      {/* 组合 */}
      {tplType === TPL_TYPE.group.value && (
        <div className={styles['group-body']}>
          <div className={styles['group-left']}>
            <Image
              draggable="false"
              className={styles['left-img']}
              style={{ borderRadius: imgRadius }}
              preview={false}
              src={imagesData[0] ? imgPrefix + imagesData[0].imageUrl : IMGERROR}
              fallback={IMGERROR}
            />
          </div>
          <div className={styles['group-left']}>
            <Image
              draggable="false"
              className={styles['right-img']}
              style={{ borderRadius: imgRadius }}
              preview={false}
              src={imagesData[1] ? imgPrefix + imagesData[1].imageUrl : IMGERROR}
              fallback={IMGERROR}
            />
            <Image
              draggable="false"
              className={styles['right-img']}
              style={{ borderRadius: imgRadius }}
              preview={false}
              src={imagesData[2] ? imgPrefix + imagesData[2].imageUrl : IMGERROR}
              fallback={IMGERROR}
            />
          </div>
        </div>
      )}
    </div>
  );
};

export default ImageView;
